<template>
  <div id="app">
    <div class="appbody">
      <router-view v-if="isRouterAlive"/>
    </div>
    <div class="footer" v-show="$route.meta.navShow==undefined||$route.meta.navShow">
      <Tabber/>
    </div>
  </div>
</template>

<script>
import Tabber from "@/components/Tabber";
import pullscoll from "@/common/PullUpReload";
import downscoll from "@/common/DropDownRefresh";
export default {
  name: "App",
  components: {
    Tabber
  },
    provide(){
      return{
        reload:this.reload
      }
    },
    data(){
      return {
        isRouterAlive:true,
      }
    },
    methods:{
      reload(){
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true
        });
      },
    },

};
</script>

<style lang="less" scoped>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

#app {
  height: 100%;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;

  .footer {
    height: 98px;
    line-height: 98px;
    font-size: 56px;
  }

  .appbody {
   flex: 1;
    overflow-x: hidden;
  }
}
</style>
